<template>
  <el-dialog :model-value="visible" title="编辑用户" :before-close="Cancel">
    <el-form :model="form" :label-width="formLabelWidth">
      <el-form-item label="账号：">
        <el-input v-model="newform.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="newform.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="newform.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码：" type="password">
        <el-input v-model="newform.passWord" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注：" type="textarea">
        <el-input
          v-model="newform.note"
          maxlength="30"
          placeholder="Please input"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-radio v-model="newform.status" :label="1" size="large">是</el-radio>
        <el-radio v-model="newform.status" :label="0" size="large">否</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="ModifyConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, watch } from "vue";
import { newAdmin, updateAdmin } from "../../../request/api";

let props = defineProps<{
  visible: boolean;
  form: AdminObjItf;
}>();
const state = reactive<{
  formLabelWidth: string;
  newform: AdminObjItf;
}>({
  formLabelWidth: "140px",
  newform: {},
});
const { formLabelWidth, newform } = toRefs(state);
//监听并拷贝form
watch(
  () => props.form,
  () => {
    newform.value = { ...props.form };
  }
);
//引入emit
const emit = defineEmits<{ (event: "Cencel", r?: "reload"): void }>();
//点击关闭
const Cancel = (r?: "reload") => {
  //传父
  emit("Cencel", r);
};
//点击确定
const ModifyConfirm = () => {
  if (newform.value.id) {
    updateAdmin(newform.value.id, newform.value).then((res) => {
      if (res.code == 200) {
        //刷新数据
        Cancel("reload");
      }
    });
  } else {
    newAdmin(newform.value).then((res) => {
      if (res.code == 200) {
        //刷新数据
        Cancel("reload");
      }
    });
  }
};
</script>

<style lang="less" scoped></style>
